<template>
  <div class="layout-menu">
    <div class="menu-search" v-show="!isCollapse">
      <el-autocomplete
        class="search"
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入关键字"
        @select="handleSelect"
      >
        <template slot="prepend">
          <i class="el-icon-search"></i>
        </template>
      </el-autocomplete>
    </div>

    <div class="menu-title" v-show="!isCollapse">综合</div>

    <el-menu
      :default-active="activeMenu"
      active-text-color="#ffd04b"
      router
      :collapse="isCollapse"
      :collapse-transition="false"
    >
      <MenuTree :item="item" v-for="item in menuRouter" :key="item.name" />
    </el-menu>

    <div
      class="menu-collapse"
      :class="{ 'collapse-active': isCollapse }"
      @click="collapseChange"
    >
      <i
        :class="[!isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left']"
      ></i>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import MenuTree from './menuTree.vue';
export default {
  components: {
    MenuTree,
  },
  props: ['value'],
  data() {
    return {
      activeMenu: '/index',
      input1: '',
      restaurants: [],
      state: '',
      timeout: null,
    };
  },
  computed: {
    ...mapState(['menuRouter', 'isCollapse']),
  },
  watch: {
    $route(to) {
      this.initSubmenu(to);
    },
  },
  created() {
    this.initSubmenu(this.$route);
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    loadAll() {
      const menuArr = [];
      const menuTree = menu => {
        menu.forEach(item => {
          if (item.meta.name) {
            menuArr.push({
              value: item.meta.name,
              address: item.name,
            });
          }
          if (item.children) {
            menuTree(item.children);
          }
        });
      };
      menuTree(this.menuRouter);
      return menuArr;
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      // clearTimeout(this.timeout);
      // this.timeout = setTimeout(() => {
      cb(results);
      // }, 2000 * Math.random());
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
      this.$router.push({ name: item.address });
    },
    collapseChange() {
      this.$store.commit('changeCollapse', !this.isCollapse);
      this.sendMsg2content({
        type: 'isCollapse',
        params: { collapse: this.isCollapse },
      });
    },
    initSubmenu(route) {
      this.activeMenu = route.path;
    },
  },
};
</script>

<style lang="less" scoped>
.layout-menu {
  height: 100%;
}

.menu-search {
  padding-top: 20px;
  padding-bottom: 10px;
  display: flex;

  /deep/.search {
    height: 30px;
    margin: 0 auto;
    width: 210px;
    opacity: 1;
    border: 1px solid #dcdfe6;
    border-radius: 4px;

    .el-input {
      height: 100%;
    }

    .el-input__inner {
      background: #f8f8f8;
      height: 100%;
      border: none;
    }

    .el-input-group__prepend {
      background: #f8f8f8;
      padding: 0 10px;
      border: none;
    }
  }
}

.menu-title {
  text-indent: 20px;
  margin-top: 10px;
  color: #0065bc;
  font-size: 14px;
}

/deep/.el-menu {
  overflow: hidden;
  // 加一个border最后的菜单展开和收起就不卡了,
  // border-bottom: 1px solid red;
  border-right: none;
  &:not(.el-menu--collapse) {
    width: 240px;
  }

  &.el-menu--collapse {
    width: 60px;
  }

  .el-menu-item.is-active {
    background: rgba(250, 241, 242, 1) !important;
    color: rgb(211, 16, 26) !important;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 100%;
      background: rgb(211, 16, 26);
    }
  }
}

/*隐藏文字*/
/deep/.el-menu--collapse .el-submenu__title span {
  display: none;
}

/*隐藏 > */
/deep/.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.menu-collapse {
  position: fixed;
  z-index: 100;
  width: 12px;
  height: 100px;
  line-height: 100px;
  background: #fff;
  left: 240px;
  top: 50%;
  margin-top: -50px;
  cursor: pointer;
  // transition: left 0.3s ease-in-out;
  text-indent: -1px;

  &.collapse-active {
    left: 60px;
  }

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: -12px;
    border: 6px solid transparent;
    border-left-color: #fff;
    border-bottom-color: #fff;
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    border: 6px solid transparent;
    border-left-color: #fff;
    border-top-color: #fff;
  }

  i {
    font-weight: 800;
    color: #004179;
  }
}
</style>
